import React, { useEffect, useState } from 'react'
import {
  addWorkSpace,
  delWorkspace,
  getWorkSpaceBaseInfo,
  modifyName,
  WorkspaceBaseInfo,
} from './workspaceAPI'
import WorkspaceItem from './WorkspaceItem'
import bgImg from '../../static/workspaceBg.svg'
import style from './Main.module.css'
import { Button, message, Modal, Carousel, Input } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import CommonBackground from '../../components/CommonBackground'
import { useAppDispatch } from '../../app/hooks'

export enum ModalOkHandler {
  ModifyName,
  AddWorkspace,
}

const Main = () => {
  //关于表单的提交的状态
  const [visible, setVisible] = useState(false)
  const [confirmLoading, setConfirmLoading] = useState(false)
  const [workspaceName, setWorkspaceName] = useState('')

  const [workspace, setWorkSpace] = useState<
    WorkspaceBaseInfo[] | null | undefined
  >([])

  //关于处理HanlderOk的情况
  const [curState, setCurState] = useState(ModalOkHandler.AddWorkspace)
  // 处理当前的选择
  const [curSelect, setCurSelect] = useState<string | null>(null)

  useEffect(() => {
    _fetchWorkSpaceInfoAndSet()
  }, [])

  // FetchWorkspaceData and setState
  const _fetchWorkSpaceInfoAndSet = async () => {
    try {
      let result = await getWorkSpaceBaseInfo()
      setWorkSpace(result.data.data)
    } catch (error) {
      message.error('拉取数据出错，请重试')
    }
  }

  //提交打开Modal的表单
  const showModal = (handleType: ModalOkHandler) => {
    setCurState(handleType)
    setVisible(true)
  }

  //提交OK的表单
  const handleOk = async () => {
    setConfirmLoading(true)
    switch (curState) {
      case ModalOkHandler.AddWorkspace:
        await addWorkSpace({ name: workspaceName })
        break
      case ModalOkHandler.ModifyName:
        if (curSelect) {
          await modifyName(curSelect, { name: workspaceName })
        }
        break
      default:
        break
    }
    await _fetchWorkSpaceInfoAndSet()
    setConfirmLoading(false)
    setVisible(false)
    setWorkspaceName('')
  }

  //提交取消的表单
  const handleCancel = () => {
    setVisible(false)
    setWorkspaceName('')
  }

  //输入表单值
  const handleInput = (value: string) => {
    setWorkspaceName(value)
  }

  //设置当前的workspace的值
  const _setSelected = (value: string) => {
    setCurSelect(value)
  }

  // 删除对应的workspace
  const handleDelWorkspace = async (wid: string) => {
    try {
      const _ = await delWorkspace(wid)
      let result = await getWorkSpaceBaseInfo()
      setWorkSpace(result.data.data)
      setWorkspaceName('')
    } catch (error) {
      message.error('删除失败，请稍后重试')
    }
  }

  return (
    <CommonBackground>
      <div className={style.scroll}>
        {workspace?.map(item => {
          return (
            <WorkspaceItem
              key={item._id}
              {...item}
              onDel={handleDelWorkspace}
              onSelect={_setSelected}
              onOpenModal={showModal}
            />
          )
        })}
      </div>
      <Button
        shape="circle"
        type="primary"
        block
        style={{ position: 'absolute', bottom: '10px', left: '10px' }}
        size="large"
        icon={<PlusOutlined />}
        onClick={e => showModal(ModalOkHandler.AddWorkspace)}
      />
      <Modal
        title={
          curState == ModalOkHandler.AddWorkspace
            ? '请输入新增workspace的名字'
            : '请输入修改后workspace的名字'
        }
        visible={visible}
        style={{ width: '300px', height: '300px', margin: 'auto' }}
        onOk={handleOk}
        confirmLoading={confirmLoading}
        onCancel={handleCancel}
      >
        <Input
          autoFocus
          value={workspaceName}
          onChange={e => {
            handleInput(e.target.value)
          }}
        />
      </Modal>
    </CommonBackground>
  )
}

export default Main
